<template>
  <div>
    <vue-loading v-show="!isLoaded"></vue-loading>
    <div v-show="isLoaded">
      <Table :request-data="requestData" v-on:list="listHander" ref="table">
        <template slot="search-box">
          <div style="height:40px;line-height:40px">积分任务</div>
        </template>
        <template slot="table-box">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="title" label="名称" width="200"></el-table-column>
            <el-table-column prop="subtitle" label="介绍"></el-table-column>
            <el-table-column prop="integral" label="积分" width="150">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.integral"
                  placeholder="填写积分"
                  type="number"
                  clearable
                  size="small"
                  v-show="currentEdit==scope.$index"
                ></el-input>
                <span v-show="currentEdit!=scope.$index">{{scope.row.integral}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="exp" label="成长值" width="150">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.exp"
                  placeholder="填写成长值"
                  clearable
                  type="number"
                  size="small"
                  v-show="currentEdit==scope.$index"
                ></el-input>
                <span v-show="currentEdit!=scope.$index">{{scope.row.exp}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="is_loop" label="类型" width="150">
              <template slot-scope="scope">
                <span>{{scope.row.is_loop?'多次任务':'单次任务'}}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <div v-show="currentEdit!=scope.$index">
                  <i
                    class="el-icon-edit main-ico-btn"
                    style="margin-left:0"
                    @click="handleEdit(scope.$index)"
                  ></i>
                </div>
                <div v-show="currentEdit==scope.$index">
                  <el-button size="mini" @click="handleSave(scope.$index)">保存</el-button>
                  <el-button size="mini" @click="handleCancel(scope.$index)">取消</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </Table>
    </div>
  </div>
</template>
<script>
import Table from "@/components/Table.vue";
export default {
  components: {
    Table
  },
  data() {
    return {
      isLoaded: false,
      currentEdit: -1,
      requestData: {
        urlPath: "/integral/gettasks",
        postData: {
          page_num: 1
        }
      },
      tableData: [],
      currentModify: {}
    };
  },
  methods: {
    listHander(e) {
      this.tableData = e;
      this.isLoaded = true;
    },
    search() {
      this.$refs.table.init();
    },

    handleEdit(index) {
      this.currentEdit = index;
    },

    handleCancel(index) {
      this.currentEdit = -1;
    },
    handleSave(index) {
      this.$http
        .post("/integral/updatetask", this.tableData[index])
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.currentEdit = -1;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(res.msg);
        });
    }
  },
  created() {}
};
</script>
<style>
</style>



